<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue';
import { Search, Plus, Refresh } from '@element-plus/icons-vue'
import axios from 'axios';
/*****************************************************数据************************************************************* */
const listSearch = reactive({
    code: "",
    channelName: "",
    auditStatus: "",
    byDate: "",
});
const pageParams = reactive({
    search: {
        size: 20,
        page: 1,

    },
    total: 0,
    loadIng: false,
    tableData: []
})

/*****************************************************method************************************************************* */
onMounted(() => {
    getData()
})

const getData = () => { 
    pageParams.loadIng = true
    axios.get("/bpi/getadvertisingSpace").then(res=>{
        console.log(res.data);
pageParams.loadIng = false
pageParams.tableData = res.data.data
pageParams.total = res.data.total
        
    })
}
const handleSizeChange=(size:number)=>{
    getData()
}
const handleCurrentChange=()=>{
    getData()
}
const add = () => { }
</script>

<template>
    <div>
        <el-card shadow="never" style="margin-top: 10px;">
            <div class="list-search">
                <el-form :inline="true" :model="listSearch" class="demo-form-inline">
                    <el-row>
                        <el-form-item label="归属ID">
                            <el-input v-model="listSearch.code" placeholder="请输入归属ID" />
                        </el-form-item>
                        <el-form-item label="申请提现时间">
                            <el-input v-model="listSearch.channelName" placeholder="请输入申请提现时间" />
                        </el-form-item>
                        <el-form-item label="申请提现金额">
                            <el-input v-model="listSearch.channelName" placeholder="请输入申请提现金额" />
                        </el-form-item>
                        <el-form-item label="支付宝名称">
                            <el-input v-model="listSearch.channelName" placeholder="请输入支付宝名称" />
                        </el-form-item>
                    </el-row>
                    <el-row>

                        <el-form-item label="支付宝账号">
                            <el-input v-model="listSearch.channelName" placeholder="请输入支付宝名称" />
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="listSearch.auditStatus" placeholder="请选择状态" style="width: 200px">
                                <el-option label="已审核" value="1" />
                                <el-option label="未审核" value="2" />
                                <el-option label="审核中" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="到账日期">
                            <el-date-picker style="width: 250px;" v-model="listSearch.byDate" type="datetimerange"
                                range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>


                    </el-row>

                </el-form>
            </div>
            <div class="list-operate">
                <div class="operate-left">
                    <el-button :icon="Plus" type="primary" @click="add">新建</el-button>
                </div>
                <div class="operate-right">
                    <el-button :icon="Search" type="primary" @click="getData">查询</el-button>
                    <el-button :icon="Refresh" @click="getData">重置</el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" style="margin-top: 10px;">
      <div class="list-table">
        <div v-if="pageParams.loadIng">
          <el-skeleton style="width: 100%" :loading="pageParams.loadIng" animated :count="3"></el-skeleton>
        </div>
        <div v-else>
          <el-table :data="pageParams.tableData" style="width: 100%"  stripe v-loading="pageParams.loadIng"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#FFF2F3F5', color: '#333' }">
            <el-table-column prop="code" label="归属ID" align="center" width="180" />
            <el-table-column prop="remarks" align="center" label="备注" min-width="100" show-overflow-tooltip />
            <el-table-column prop="orderNUmber" align="center" label="提现订单号" min-width="100" show-overflow-tooltip />
            <el-table-column prop="applicationWithdrawalTime" align="center" label="申请提现时间" min-width="100" show-overflow-tooltip />
            <el-table-column prop="applicationForWithdrawalAmount" align="center" label="申请提现金额" min-width="100" show-overflow-tooltip />
            <el-table-column prop="NameofAlipay" align="center" label="支付宝姓名" min-width="100" show-overflow-tooltip />
            <el-table-column prop="AlipayAccount" align="center" label="支付宝账号" min-width="150"
              show-overflow-tooltip />
            <el-table-column prop="status" align="center" label="状态" min-width="100" show-overflow-tooltip />
            <el-table-column prop="paymentDate" align="center" label="到账时间" min-width="100"
              show-overflow-tooltip />
            <el-table-column prop="WithdrawalBalance" align="center" label="提现余额" min-width="100"
              show-overflow-tooltip />
            <el-table-column prop="BalanceUponReceipt" align="center" label="到账后余额" min-width="100" show-overflow-tooltip />
            <el-table-column prop="Serialnumber" align="center" label="流水号" min-width="100" show-overflow-tooltip />
    
            <el-table-column fixed="right" label="操作" align="center" width="220">
              <template #default>
                <el-button type="primary" size="small">详情</el-button>
                <el-button type="primary" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="pageParams.search.page" v-model:page-size="pageParams.search.size"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
        </div>
      </div>
    </el-card>
    </div>
</template>

<style lang='scss' scoped>
.list-operate {
  display: flex;

  .operate-left {
    width: 150px;
  }

  .operate-right {
    flex: 1;
    display: flex;
    justify-content: end;
  }
}

.demo-pagination-block {
    margin-top: 5px;
  display: flex;
  justify-content: end;
}
</style>
